<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        header {
            width: 100%;
            height: 60px;
            background-color: #0099cb;
            display: flex;
            justify-content: space-between;
            line-height: 60px;
            position: sticky;
            top: 0;
            z-index: 1;
        }

        header span {
            padding-left: 50px;
            font-size: 20px;
            font-weight: 1000;
            color: white;
        }

        header div {
            height: 60px;
            line-height: 60px;
            padding-right: 40px;
        }

        header p {
            display: inline;
            color: white;
            margin-right: 5px;
        }

        nav {
            z-index: 1;
            height: 100%;
            width: 160px;
            position: fixed;
            top: 60px;
            left: 0;
            background-color: #2d3e50;
            overflow-x: hidden;
            padding-top: 20px;
        }

        nav ul {
            list-style: none;
        }

        nav ul li {
            padding-top: 27px;
            margin-left: 30px;
            color: white;
            font: 12px;
        }

        .main {
            margin-left: 160px;
            padding: 0px 10px;
        }

        .main-header {
            flex: 1;
            margin-top: 40px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }

        .main-header div {
            width: 350px;
            height: 70px;
            background-color: #0196c0;
        }

        .main-header div span {
            color: white;
            margin-left: 20px;
            font-size: 10px;
        }

        .main-header div p {
            color: white;
            margin-top: 10px;
            font-size: 20px;
            margin-left: 20px;
        }

        .echatrs {
            margin-top: 20px;
            width: 100%;
            height: 400px;
            overflow: hidden;
        }

        .one {
            float: left;
            height: 330px;
            width: 45%;
            margin: 20px;
        }

        .two {
            float: right;
            height: 330px;
            width: 45%;
            margin: 20px;
        }

        .bg {
            width: 100%;
            height: auto;
        }

        table {
            width: 100%;
            border-spacing: 20px;
        }

        tbody {
            margin-top: 10px;
        }

        th {
            width: 10%;
        }

        tr {
            text-align: center;
        }

        .active {
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <header>
        <span>后台管理系统</span>
        <div>
            <p>当前用户: boostrap中文</p>
            <p>角色: 管理员</p>
        </div>
    </header>
    <div class="continet">
        <nav>
            <ul>
                <li style="color:#0196c0;">后台系统</li>
                <li>设计元素</li>
                <li>表单元素</li>
                <li>示例页面</li>
                <li>常用列表</li>
                <li>脚本插件</li>
                <li>统计图表</li>
            </ul>
        </nav>
        <div class="main">
            <div class="main-header">
                <div>
                    <span>今日收入</span>
                    <p>100,000,000</p>
                </div>
                <div>
                    <span>今日收入</span>
                    <p>100,000,000</p>
                </div>
                <div style="background-color: #14c376;">
                    <span>今日收入</span>
                    <p>100,000,000</p>
                </div>
                <div style="background-color: #8f9080;">
                    <span>今日收入</span>
                    <p>100,000,000</p>
                </div>
            </div>
            <div class="echatrs">
                <div class="one"></div>
                <div class="two"></div>
            </div>
            <div class="bg">
                <table>
                    <thead>
                        <tr>
                  <th>#</th>
                  <th>订单号</th>
                  <th>商品名称</th>
                  <th>下单日期</th>
                  <th>状态(+判断)</th>
                  <th>处理情况(json动态渲染)</th>
                </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>

</body>

</html>

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script>
    var one = document.querySelector('.one')
    var myChart = echarts.init(one);
    var option;

    option = {
        xAxis: {
            //show: false,
            data: [01, 02, 03, 04, 05, 06, 07],
            //offset: 12,
        },
        yAxis: {
            //show: false
        },
        series: [{
            name: 'a',
            tooltip: {
                show: false
            },
            type: 'bar',
            barWidth: 16, //柱子宽度
            barGap: 0.5, //柱子之间间距
            emphasis: {
                itemStyle: {//填充部分鼠标移上去颜色
                    color: 'rgba(255, 0, 0, 0.4)'
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgba(255, 0, 0, 0.4)',
                    borderWidth: '1',
                    borderColor: 'rgba(255, 0, 0 , 0.3)',
                }
            },
            data: [220, 182, 191, 234, 290, 330, 310],
            barGap: 0,
            legendHoverLink: false,
        }, {
            name: 'b',
            tooltip: {
                show: false
            },
            type: 'pictorialBar',
            itemStyle: {
                normal: {//未填充部分鼠标移上去颜色
                    color: 'rgba(255, 0, 0, 0.4)',
                    borderWidth: 1,
                    borderColor: 'rgba(255, 0, 0, 1)'
                }
            },
            symbolRotate: 0,
            symbolSize: [16, 6],
            symbolOffset: [-12, 2],
            symbolPosition: 'start',
            data: [220, 182, 191, 234, 290, 330, 310],
            z: 3
        },
        {
            name: 'b',
            tooltip: {
                show: false
            },
            type: 'pictorialBar',
            itemStyle: {
                normal: {
                    color: 'rgba(255, 0, 0, 0.4)',
                    borderWidth: 1,
                    borderColor: 'rgba(255, 0, 0, 1)'
                }
            },


            symbolRotate: 0,
            symbolSize: [16, 6],
            symbolOffset: ['-12', '-2'],
            symbolPosition: 'end',
            data: [220, 182, 191, 234, 290, 330, 310],
            z: 3
        }, {
            type: 'bar',
            // stack: 1,
            barWidth: 16, //柱子宽度
            barGap: 0.5, //柱子之间间距
            emphasis: {
                itemStyle: {//左侧未填充部分鼠标移上去颜色
                    color: 'rgba(143, 219, 255, 0.45)',
                    barBorderColor: 'rgba(143, 219, 255 ,1)'
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgba(143, 219, 255, 0.45)',
                    barBorderColor: 'rgba(143, 219, 255 ,1)',
                }
            },
            data: [220, 182, 191, 234, 290, 330, 310],
        }, {
            name: 'b1',
            tooltip: {
                show: false
            },
            type: 'pictorialBar',

            itemStyle: {
                normal: {
                    color: 'rgba(143, 219, 255, 0.45)',
                    borderWidth: 1,
                    borderColor: 'rgba(143, 219, 255, 0.45)'
                }
            },

            symbolSize: [16, 6],
            symbolOffset: [12, 2],
            symbolPosition: 'start',
            data: [220, 182, 191, 234, 290, 330, 310],
            z: 7
        },
        {
            name: 'b1',
            tooltip: {
                show: false
            },
            type: 'pictorialBar',
            itemStyle: {
                normal: {
                    color: 'rgba(143, 219, 255, 0.45)',
                    borderWidth: 1,
                    borderColor: 'rgba(143, 219, 255, 1)'
                }
            },


            symbolRotate: 0,
            symbolSize: [16, 6],
            symbolOffset: ['12', '-2'],
            symbolPosition: 'end',
            data: [220, 182, 191, 234, 290, 330, 310],
            z: 7
        }
        ]
    };
    option && myChart.setOption(option);
    var two = document.querySelector('.two')
    var myChart1 = echarts.init(two);
    var option1;

    option1 = {
        title: {
            text: '每年收入走势',

        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['最高气温', '最低气温']
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {},
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['6/1', '6/4', '6/7', '6/10', '6/13', '6/16', '6/19', '6/21', '6/24', '6/27', '6/30', '7/2', '7/5', '7/8', '7/11']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            }
        },
        series: [
            {
                name: '每年收入走势',
                type: 'line',
                data: [50, 55, 60, 40, 45, 40, 65, 40, 65, 30, 91, 96, 103, 100, 115],
                markPoint: {
                    data: [
                        { type: 'max', name: '最大值' },
                        { type: 'min', name: '最小值' }
                    ]
                },
                markLine: {
                    data: [
                        { type: 'average', name: '平均值' }
                    ]
                }
            },
            {
                name: '每年同期收入走势',
                type: 'line',
                data: [42, 50, 48, 40, 35, 65, 45, 55, 30, 75, 81, 86, 93, 90, 100],
                markPoint: {
                    data: [
                        { type: 'max', name: '最大值' },
                        { type: 'min', name: '最小值' }
                    ]
                },
                markLine: {
                    data: [
                        { type: 'average', name: '平均值' }
                    ]
                }
            }
        ]
    };
    option1 && myChart1.setOption(option1);
</script>